<template>
  <div id="mapBox">
    <div v-if="datas.search" id="panel" :style="panelStyles"></div>
    <div id="container" :style="styles"></div>
  </div>
</template>
<script>
import AMap from "AMap";
export default {
  props: {
    type: {
      type: String,
      default: "null"
    },
    datas: {
      type: Object,
      default: () => {}
    },
    heights: {
      type: Number,
      default: 500
    },
    widths: {
      type: Number,
      default: 700
    }
  },
  data() {
    return {
      lng: "",
      lat: "",
      cacheData: ""
    };
  },
  computed: {
    styles() {
      return `width:${this.widths}px;height:${this.heights}px`;
    },
    panelStyles() {
      return `height:${this.heights}px`;
    }
  },
  watch: {
    datas(v) {
      let a = JSON.stringify(this.cacheData);
      let b = JSON.stringify(v);
      if (a !== b) {
        switch (this.type) {
          case "Circle":
            this.$nextTick(() => {
              this.mapCircle();
            });
            break;
          case "Marker":
            this.$nextTick(() => {
              this.mapMarker();
            });
            break;
        }
        this.cacheData = v;
      }
    }
  },
  created() {},
  mounted() {
    switch (this.type) {
      case "Circle":
        this.mapCircle();
        break;
      case "Marker":
        this.mapMarker();
        break;
    }
  },
  methods: {
    mapCircle() {
      let vm = this;
      let map = new AMap.Map("container", {
        zoom: 14
      });
      map.plugin("AMap.Geolocation", () => {
        let geolocation = new AMap.Geolocation({
          zoomToAccuracy: true
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, "complete", data => {
          let lng;
          let lat;
          if (vm.datas.lng && vm.datas.lat) {
            lng = vm.datas.lng;
            lat = vm.datas.lat;
          } else {
            lng = data.position.lng;
            lat = data.position.lat;
          }
          vm.$emit("retunrData", { lat, lng });
          let circle = new AMap.Circle({
            center: [lng, lat],
            radius: vm.datas.radius * 1000,
            borderWeight: 3,
            strokeColor: "#FF33FF",
            // strokeOpacity: 1,
            strokeWeight: 2,
            strokeOpacity: 0.2,
            fillOpacity: 0.4,
            strokeStyle: "solid",
            strokeDasharray: [10, 10],
            fillColor: "#1791fc",
            zIndex: 50
          });
          circle.setMap(map);
          map.setFitView([circle]);
        });
        // AMap.event.addListener(geolocation, "error", data => {});
      });
    },
    mapMarker() {
      let vm = this;
      // eslint-disable-next-line no-undef

      let map = new AMap.Map("container", {
        zoom: 14
      });
      // 构造地点查询类
      var placeSearch = new AMap.PlaceSearch({
        pageSize: 7,
        pageIndex: 1,
        map: map,
        panel: "panel",
        autoFitView: true
      });
      // 关键字查询

      if (vm.datas.search) {
        placeSearch.search(vm.datas.search);
      }
      AMap.event.addListener(placeSearch, "selectChanged", e => {
        let res = e.selected.data;
        vm.$emit("retunrData", {
          address: res.address,
          lat: res.location.lat,
          lng: res.location.lng
        });
      });

      // placeSearch.on('success', positionResult => {
      //   console.log(positionResult)
      //   if (vm.datas.search) {
      //     // vm.$emit('retunrData', { address: positionResult.address, lat: positionResult.position.lat, lng: positionResult.position.lng })
      //   }
      // })
    }
    // mapMarker () {
    //   let vm = this
    //   let map = new AMap.Map('container', {
    //     zoom: 14
    //   });
    //   map.plugin('AMap.Geolocation', () => {
    //     let geolocation = new AMap.Geolocation({
    //       zoomToAccuracy: true
    //     });
    //     map.addControl(geolocation);
    //     geolocation.getCurrentPosition();
    //     AMap.event.addListener(geolocation, 'complete', (data) => {
    //       vm.lng = data.position.lng
    //       vm.lat = data.position.lat
    //       let marker = new AMap.Marker({
    //         position: map.getCenter(),
    //         icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    //         position: [vm.lng, vm.lat],
    //         offset: new AMap.Pixel(-13, -30),
    //         draggable: true,
    //         cursor: 'move',
    //         raiseOnDrag: true
    //       });
    //       marker.on('dragend', e => {
    //         AMap.plugin('AMap.Geocoder', function () {
    //           let geocoder = new AMap.Geocoder()
    //           var lnglat = [e.lnglat.lng, e.lnglat.lat]
    //           geocoder.getAddress(lnglat, (status, result) => {
    //             if (status === 'complete' && result.info === 'OK') {
    //             }
    //           })
    //         })
    //       })
    //       marker.setMap(map)
    //     });

    //   })

    // }
  }
};
</script>
<style>
#mapBox {
  display: flex;
}
.amap-icon img {
  width: 25px;
  height: 34px;
}
#panel {
  background-color: white;
  overflow-y: auto;
  width: 280px;
}
</style>
